<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="one"> 我是 一个 div <p>段落标签</p>
        <!-- 注释 -->
        hello world
        <span>元素</span>
    </div>
    <!-- 注释 -->
    hello world
    <div id="pre">前一个节点</div>
    <div id="next">后一个节点</div>
    <script>
        // 1.nodeType 返回节点类型的整数值
        console.log(document.nodeType, '文档节点');
        // 获取div
        var div = document.getElementById('one');
        // console.log(div.attributes.id.nodeType,'属性节点');
        // console.log(div.nodeType,'元素节点');

        // 2.nodeName 返回节点纯大写名称
        // console.log(div.nodeName);
        // console.log(document.body.nodeName);

        // 3.nodeValue 返回当前节点文本值 针对文本节点 属性节点 注释节点
        // console.log(div.firstChild.nodeValue);
        // div.firstChild.nodeValue = '修改了';

        // 4.textContent 返回当前节点和后代节点文本内容 
        // console.log(div.textContent);

        // 5.nextSibling 获取后一个节点
        // 6.previousSibling 获取前一个节点
        // 获取pre和nextdiv
        var d1 = document.getElementById('pre');
        var d2 = document.getElementById('next');
        // console.log(d1.nextSibling,'获取后一个节点');
        // console.log(d2.previousSibling,'获取前一个节点');

        // 7.parentNode 返回的是当前节点的父节点
        // 8.parentElement 返回当前节点父元素节点
        // console.log(d1.parentNode);
        // console.log(d2.parentElement);
        // 修改父元素节点样式 
        // d2.parentElement.style.backgroundColor = 'red';

        // 9.firstChild 获取当前节点的第一个子节点
        // 10.lastChild 获取当前节点的最后一个子节点
        // console.log(div.firstChild);
        // console.log(div.lastChild);

        // 11.childNodes 返回当前节点的所有子节点 类数组对象 Nodelist集合
        console.log(div.childNodes);
        console.log(Array.isArray(div.childNodes));
        var res = Array.from(div.childNodes);
        //只保留元素节点(标签)  
        // var result = res.filter(function(item){
        //   return item.nodeType === 1
        // });
        // console.log(result);

        // 12.children 返回当前节点子元素节点 
        console.log(div.children, '子元素节点');
    </script>
</body>

</html>